<template>
	<view class="container">
		<lsj-upload ref="lsjUpload" childId="upload1" :option="option" :size="size" :count="count"
			:instantly="instantly" @change="onChange" @uploadEnd="onuploadEnd">
			<view class="submit_box" :style="{height: height}">
				<text class="iconfont icon-shangchuan"></text>
				上传文件
			</view>
		</lsj-upload>
		<view class="contImg" v-if="dataFiles.length > 0">
			<view class="list" v-for="(item,i) in dataFiles" :key="i">
				<view class="title">{{item.name}}</view>
				<uni-icons class="icon" @click="onDel(item)" type="closeempty" color="#333" size="20"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "file-upload-app",
		data() {
			return {
				// 上传接口参数  
				option: {
					url: `https://api.xiaoshengkeji.cn/api/upload`,  // http://127.0.0.1/api/upload_image
					name: 'files[]',  // avatar
					formData: {
						filename: '', // 不能直接赋值
						cid: 2,
					}
				},
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: false,
				// 文件上传大小限制 M
				size: 30,
				// 文件数量限制
				count: 3,
				height: '42rpx',
				// 是否多选
				multiple: true,
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				dataFiles: [
					// {
					// 	file: {},
					// 	name: "1.jpg",
					// 	path: "http://tmp/Zz7iO1JYX0kj473f5971bbba33f96bb34a508e0d6c63.jpg",
					// 	progress: 100,
					// 	size: 81131,
					// 	type: "fail",
					// }
				],
				queryData: [],
				show: true,
			}
		},
		mounted() {
			// 一、把插件的vm，返回给父组件。 父组件取法：@fileVm="fileVm"
			// this.$emit("fileVm", this.$refs['lsjUpload'])
			// 一、把当前组件的实例，返回给父组件
			// this.$emit("filePlugin", this)
			// 二、优化。插件的vm存放到当前组件的vm上，即可通过ref取到
			this.$son = this.$refs['lsjUpload']
		},
		methods: {
			// 选取文件和上传
			onChange(files) {
				// 回显数组为空
				if (this.dataFiles.length == 0) {
					this.dataFiles = [...files.values()]

					this.dataFiles.map((el, i) => {
						if (this.show) uni.showLoading({
							title: '上传中...',
							mask: true
						});
						// 不能直接复制。赋值到formData，可以打印，但传不到后台
						// this.option.formData.filename = el.name  
						// 动态更新参数，必须使用该方法
						this.$refs.lsjUpload.setData('formData.filename', el.name);

						this.$refs['lsjUpload'].upload(); // 手动上传
					})
				} else {
					let filesArr = [...files.values()]
					filesArr.map((el, i) => {
						if (this.show) uni.showLoading({
							title: '上传中...',
							mask: true
						});

						if (i > this.dataFiles.length - 1) {
							this.$refs.lsjUpload.setData('formData.filename', el.name);
							this.$refs['lsjUpload'].upload(); // 手动上传
						} else {
							setTimeout(() => {
								uni.hideLoading()
								// 阻止点击删除，也触发
								if (!this.show) uni.showToast({
									title: '请勿重复上传',
									icon: 'none',
									mask: true
								});
							}, 200)
						}
					})
					this.dataFiles = filesArr
				}
			},
			onuploadEnd(resolve) {
				// 对dom进行重排，因为按钮是使用的绝对定位
				this.$nextTick(() => this.$refs.lsjUpload.show())

				let res = JSON.parse(resolve.responseText)
				if (!res.code) {
					setTimeout(() => uni.hideLoading(), 500)
					res.data.map(el => {
						this.queryData.push(el)
					})

					// 返回给父组件
					this.$emit("imageUrl", this.queryData)
				} else uni.showToast({
					title: '上传失败，请退出重试！',
					icon: 'none',
					mask: true
				});
			},
			// 删除部分（all：删除全部）
			onDel(item, flag = '') {
				this.show = false
				// name=指定文件名，不传name默认移除所有文件
				if (flag == 'all') {
					this.$refs['lsjUpload'].clear();
					this.queryData.length = 0
				} else this.$refs['lsjUpload'].clear(item.name);

				this.$nextTick(() => {
					this.show = true
					this.$refs.lsjUpload.show()
					// 处理参数，
					this.queryData = this.queryData.filter((el) => {
						return el.filename != item?.name
					})
					// 返回给父组件
					this.$emit("imageUrl", this.queryData)
				})
			},
			onDomReset() {
				// 对dom进行重排，因为按钮是使用的绝对定位
				this.$nextTick(() => this.$refs.lsjUpload.show())
			}
			// aaa(){
			// 	this.$refs['lsjUpload'].hide();
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 0;
		// border: 1px solid red;
	}

	.contImg {
		padding: 20rpx 0;

		.list {
			box-sizing: border-box;
			border: 1rpx solid #ccc;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8px 10px;
			margin-bottom: 10rpx;

			.title {
				font-size: 28rpx;
				color: #666;
				word-break: break-all;
				word-wrap: break-word;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-right: 100rpx;
			}
		}
	}

	.submit_box {
		display: flex;
		align-items: center;
		justify-content: center;
		/* #ifdef MP-WEIXIN */
		margin: 0 15rpx;
		/* #endif */
		padding: 15rpx 0;
		font-size: 30rpx;
		color: #444;
		border-radius: 8rpx;
		background-color: rgb(239, 239, 239);

		.icon-shangchuan {
			padding-right: 10rpx;
			font-size: 40rpx;
		}
	}
</style>